<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide</title>
    <link rel="stylesheet" href="./public.css">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        #slide{
            width: 100vw;
            overflow: hidden;
        }
        ul {
            display: flex;
            flex-wrap: nowrap;
            position: relative;
            top:0;
            left: 0;
        }
        #slide img{
            width: 245px;
        }
    </style>
</head>
<body>
<div id="slide">
<ul id="slide_ul">
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="./images/cat.png" alt="加载失败" />
            <figcaption>Hello Everyone!</figcaption>
        </figure>
    </li>
</ul>
</div>
<script type="text/javascript">
    $(function () {
        var li=$('#slide li').width(),ali=$('#slide li').length,ALiLength=li*ali;
        var startX,moveX,moveLength=window.innerWidth-ALiLength>=0?window.innerWidth-ALiLength:ALiLength-window.innerWidth;
        var outContent=document.getElementById('slide');
        var moveDiv = document.getElementById('slide_ul');

        outContent.addEventListener('touchstart', function(event) {
            var touch = event.targetTouches[0];
            startX = touch.pageX;
        }, false);
        outContent.addEventListener('touchmove', function(event) {
            var touch = event.targetTouches[0];
            if(-moveDiv.offsetLeft<=moveLength&&moveDiv.offsetLeft<=0){
                moveDiv.style.left=moveDiv.offsetLeft+touch.pageX - startX+'px'
            }
            startX = touch.pageX;
        }, false);
        outContent.addEventListener('touchend', function(event) {
            if(-moveDiv.offsetLeft>=moveLength){
                moveDiv.style.left= -moveLength+'px'
            }else if(moveDiv.offsetLeft>=0){
                moveDiv.style.left= '0px'
            }
        }, false);
    })
</script>
</body>
</html>